﻿@section scripts {
    <script type="text/javascript" src="~/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="~/Scripts/ChatViewModel.js"></script>
    <script src="~/signalr/hubs"></script>
}

<!-- ko if: State() == 0 || State() == 1 -->
<div class="jumbotron">
    <h1>Ylischat</h1>
    <p class="lead">Chat with your nyymies online, even on the go!</p>
    <p><a href="#start" class="btn btn-primary btn-lg" data-bind="click: LoginState">Login</a> <a href="#start" class="btn btn-default btn-lg" data-bind="click: RegisterState">Register</a></p>
</div>
<div class="row">
    <div class="col-md-12">
        <a name="start"></a>
        <!-- ko if: State() == 1 -->
        <h2>Register</h2>
        <!-- /ko -->
        <!-- ko if: State() == 0 -->
        <h2>Login</h2>
        <!-- /ko -->
        <form id="RegisterForm">
            <div class="form-group">
                <label for="exampleInputEmail1">Nick</label>
                <input type="text" class="form-control lowwidth" id="exampleInputText1" placeholder="Nick" data-bind="textinput: Nick" required>
            </div>
            <!-- ko if: State() == 1 -->
            <div class="form-group">
                <label for="exampleInputPassword2">Email</label>
                <input type="email" class="form-control lowwidth" id="exampleInputEmail1" placeholder="Email" data-bind="textinput: Email" required>
            </div>
            <!-- /ko -->
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control lowwidth" id="exampleInputPassword1" placeholder="Password" data-bind="textinput: Password">
            </div>
            <!-- ko if: State() == 1 -->
            <div class="form-group">
                <label for="exampleInputPassword2">Confirm Password</label>
                <input type="password" class="form-control lowwidth" id="exampleInputPassword2" placeholder="Password" data-bind="textinput: Password2">
            </div>
            <button type="submit" class="btn btn-default" data-bind="click: Register">Register &raquo;</button>
            <!-- /ko -->
            <!-- ko if: State() == 0 -->
            <button type="submit" class="btn btn-default" data-bind="click: Login">Login &raquo;</button>
            <!-- ko if: Loading -->
            <img src="~/Content/loader-64.gif" alt="Loading..." />
            <!-- /ko -->
            <!-- /ko -->
        </form>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>Please register to get started.</p>
    </div>
    <div class="col-md-4">
        <h2>Mobile Clients</h2>
        <p>Mobile clients will be made for Android, iPhone and Windows Phone.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301871">Learn more &raquo;</a></p>
    </div>
</div>
<!-- /ko -->
<!-- ko if: State() == 2 -->
<div class="row">
    <div class="col-md-12">
        <p class="bg-danger" style="padding: 15px">No channels joined! Please join a channel.</p>
        <!-- ko template: { name: 'join-template' } -->
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->
<!-- ko if: State() == 3 -->
<div class="row">
    <div class="col-md-10">
        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist" data-bind="foreach: Channels">
                <li role="presentation" data-bind="css: { active: $data.HashTag == $parent.CurrentChannel() }" class="active">
                    <a role="tab" data-toggle="tab" data-bind="text: $data.HashTag, attr: { href: $data.HashTag }, click: $parent.ChangeChannel"></a>
                </li>
            </ul>
        </div>
        <div class="well well-lg chatwell" data-bind="template: { name: getMessageTemplate, foreach: CurrentMessages }">

        </div>
        <input type="text" class="form-control" id="chatInput" placeholder="Write here..." data-bind="textinput: Message, event: { keypress: CheckForEnter }">
        <form id="InlineChatForm" class="form-inline">
            <button type="button" class="btn btn-primary btn-lg" data-bind="click: SendMessage">Send message</button>
            <input type="file" class="input-lg pull-right" accept="image/*,audio/*,video/*" id="attachment" />
        </form>
    </div>
    <div class="col-md-2">
        <p style="margin-top: 15px;"><span data-bind="text: CurrentUserList().length"></span> users</p>
        <div class="list-group userlist" data-bind="foreach: CurrentUserList">
            <a href="#" class="list-group-item" data-bind="css: { 'list-group-item-success': $data.AdminState == 2, active: $data.Id == $parent.SelectedUser() }, text: $data.Nick, click: $parent.SetUser"></a>
        </div>
        <div class="row">
            <div class="col-md-2">
                <button type="button" class="btn btn-default" data-bind="click: JoinChannelState">Join channel</button>
                <button type="button" class="btn btn-default" data-bind="click: LeaveChannel">Leave <span data-bind="text: CurrentChannel"></span></button>
            </div>
        </div>
    </div>
</div>
<!-- /ko -->
<!-- ko if: State() == 4 -->
<div class="row">
    <div class="col-md-12">
        <p class="bg-info" style="padding: 15px">Please search for a channel.</p>
        <!-- ko template: { name: 'join-template' } -->
        <!-- /ko -->
        <button type="button" class="btn btn-default" data-bind="click: ChatState">Cancel</button>
    </div>
</div>
<!-- /ko -->

<script type="text/html" id="join-template">
    <div class="dropdown">
        <input type="text" class="form-control" id="joinInput" placeholder="Channel name here..." data-bind="textinput: JoinInput" data-toggle="dropdown">
        <ul class="dropdown-menu" aria-labelledby="dLabel">
            <!-- ko if: JoinInput().length == 0 -->
            <li><a href="" data-bind="click: JoinHeseNyymit">#hesenyymit</a></li>
            <!-- /ko-->
            <!-- ko if: JoinInput().length > 0 && JoinQueryResults().length == 0 -->
            <li><a href="" data-bind="click: CreateChannel">Create a channel <span data-bind="text: JoinInput"></span></a></li>
            <!-- /ko-->
            <!-- ko foreach: JoinQueryResults -->
            <li><a href="" data-bind="text: $data, click: $parent.JoinChannel"></a></li>
            <!-- /ko-->
        </ul>
    </div>
</script>
<script type="text/html" id="normal-message-template">
    <!-- ko if: AttachmentId != null && $parent.Attachments[AttachmentId].URL().length > 0 -->
    <a href="" data-bind="attr: { href: $parent.Attachments[AttachmentId].URL }" target="_blank">
        <img src="" data-bind="attr: { src: $parent.Attachments[AttachmentId].URL, alt: $parent.Attachments[AttachmentId].OriginalName }" width="320" height="240" />
    </a><br />
    <!-- /ko -->
    [<span data-bind="text: $parent.GetTimeString(TimeStamp)"></span>] &lt;<span data-bind="text: $parent.GetNick(UserId)"></span>&gt; <span data-bind="text: Message"></span><br />
</script>
<script type="text/html" id="system-message-template">
    [<span data-bind="text: $parent.GetTimeString(TimeStamp)"></span>] <span data-bind="text: $parent.GetNick(UserId)"></span> <span data-bind="text: $parent.getSystemMessage(Message)"></span><br />
</script>